<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="js/layui/css/layui.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/style.css">
    <title>登录</title>
</head>

<body class="body-login">
    <div class="login-bg"></div>
    <div class="login-container">
        <div class="form-container">
            <form class="layui-form" action="login.php" method="POST">
                <h3>登录</h3>
                <div class="layui-form-item">
                    <label class="user-login-icon layui-icon layui-icon-username"></label>
                    <input class="layui-input user-login-input" name="username" lay-verify="username" autocomplete="off" placeholder="用户名" type="text">
                </div>
                <div class="layui-form-item">
                    <label class="user-login-icon layui-icon layui-icon-password"></label>
                    <input class="layui-input user-login-input" name="pwd" lay-verify="pwd" autocomplete="off" placeholder="密码" type="password">
                </div>
                <div class="layui-form-item">
                    <div class="layui-row">
                        <div class="layui-col-xs7">
                            <label class="user-login-icon layui-icon layui-icon-vercode"></label>
                            <input class="layui-input user-login-input" name="vercode" lay-verify="required|number" autocomplete="off" placeholder="验证码" type="vercode">
                        </div>
                        <div class="layui-col-xs5">
                            <div style="margin-left: 10px;">
                                <img class="user-login-codeimg" src="https://www.oschina.net/action/user/captcha" alt="">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item" pane="">
                    <div class="inline">
                        <input name="like1[read]" lay-skin="primary" title="记住密码" type="checkbox" checked>
                    </div>
                    <div class="inline fr mgt10">
                        <a class="rememberpwd" href="javascript:;">忘记密码？</a>
                    </div>
                </div>
                <div class="layui-form-item">
                    <button class="layui-btn layui-btn-xhm btn-login" lay-submit="" lay-filter="btn-login">登录</button>
                </div>
                <div class="layui-form-item login-other">
                    <fieldset>
                        <legend>第三方登录</legend>
                        <div class="mgt10">
                            <a href="javascript:;"><i class="layui-icon layui-icon-login-qq"></i></a>
                            <a href="javascript:;"><i class="layui-icon layui-icon-login-wechat"></i></a>
                            <a href="javascript:;"><i class="layui-icon layui-icon-login-weibo"></i></a>
                            <a class="user-jump-change toRegist" href="javascript:;">注册账号</a>
                        </div>
                    </fieldset>
                </div>
            </form>
        </div>
        <div class="form-container-2">
            <h3>注册</h3>
            <form class="layui-form" action="regist.php" method="POST">
                <div class="layui-form-item">
                    <label class="user-login-icon layui-icon layui-icon-username"></label>
                    <input class="layui-input user-login-input" name="username" lay-verify="username" autocomplete="off" placeholder="用户名" type="text">
                </div>
                <div class="layui-form-item">
                    <label class="user-login-icon layui-icon layui-icon-password"></label>
                    <input class="layui-input user-login-input" name="pwd" lay-verify="pwd" autocomplete="off" placeholder="密码" type="password">
                </div>
                <div class="layui-form-item">
                    <label class="user-login-icon layui-icon layui-icon-password"></label>
                    <input class="layui-input user-login-input" name="pwdagain" lay-verify="pwdagain" autocomplete="off" placeholder="请再次输入密码" type="password">
                </div>
                <div class="layui-form-item">
                    <div class="layui-row">
                        <div class="layui-col-xs7">
                            <label class="user-login-icon layui-icon layui-icon-vercode"></label>
                            <input class="layui-input user-login-input" name="vercode" lay-verify="required|number" autocomplete="off" placeholder="验证码" type="text">
                        </div>
                        <div class="layui-col-xs5">
                            <div style="margin-left: 10px;">
                                <img class="user-login-codeimg" src="https://www.oschina.net/action/user/captcha" alt="">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="user-login-icon layui-icon layui-icon-username"></label>
                    <input class="layui-input user-login-input" name="name" lay-verify="name" autocomplete="off" placeholder="昵称" type="text">
                </div>
                <div class="layui-form-item" pane="">
                    <div class="inline">
                        <input name="like1[read]" lay-skin="primary" title="同意用户协议" type="checkbox" checked>
                    </div>
                </div>
                <div class="layui-form-item">
                    <button class="layui-btn layui-btn-xhm btn-regist" lay-submit="" lay-filter="btn-regist">注册</button>
                </div>
                <div class="layui-form-item login-other">
                    <fieldset>
                        <legend>第三方登录</legend>
                        <div class="mgt10">
                            <a href="javascript:;"><i class="layui-icon layui-icon-login-qq"></i></a>
                            <a href="javascript:;"><i class="layui-icon layui-icon-login-wechat"></i></a>
                            <a href="javascript:;"><i class="layui-icon layui-icon-login-weibo"></i></a>
                            <a class="user-jump-change toLogin" href="javascript:;">用已有帐号登入</a>
                        </div>
                    </fieldset>
                </div>
            </form>
        </div>
    </div>

    <script src="js/jquery1.9.1.min.js"></script>
    <script src="js/layui/layui.js"></script>
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/layer/2.1/layer.js"></script> -->
    <script>
        layui.use(['layer', 'form'], function() {
            var layer = layui.layer,
                form = layui.form;
            form.render();

            form.verify({
                username: function(value, item) { //value：表单的值、item：表单的DOM对象
                        if (!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)) {
                            return '用户名不能有特殊字符';
                        }
                        if (/(^\_)|(\__)|(\_+$)/.test(value)) {
                            return '用户名首尾不能出现下划线\'_\'';
                        }
                        if (/^\d+\d+\d$/.test(value)) {
                            return '用户名不能全为数字';
                        }
                    }

                    //我们既支持上述函数式的方式，也支持下述数组的形式
                    //数组的两个值分别代表：[正则匹配、匹配不符时的提示文字]
                    ,
                pwd: [
                    /^[\S]{6,12}$/, '密码必须6到12位，且不能出现空格'
                ]
            });

            $('.toRegist').on('click', function() {
                $('.form-container').hide();
                $('.form-container-2').show();
            })
            $('.toLogin').on('click', function() {
                $('.form-container').show();
                $('.form-container-2').hide();
            })

            $('.rememberpwd,.layui-icon-login-qq,.layui-icon-login-wechat,.layui-icon-login-weibo').on('click', function() {
                layer.msg('尚未实现', {
                    time: 800
                })
            })
        })

        $('body').css('min-height', $(window).height() + 'px').height('auto');
        $(window).resize(function() {
            $('body').css('min-height', $(window).height() + 'px').height('auto');
        })
    </script>
</body>

</html>